import { useState } from "react";

type Shape = {
	id: number;
	type: string;
	x: number;
	y: number;
};
let initialShapes :Shape[] = [
    { id: 1, type: "circle", x: 50, y: 100},
    { id: 2, type: "square", x: 150, y: 100},
	{ id: 3, type: "circle", x: 250, y: 100},
];

const ShapeEditor = () => {
	const [shapes, setShapes] = useState(initialShapes);

	const handleClick = () => {
		setShapes(shapes.map(shape => {
			if( shape.type === "square" ) {
				return {
					...shape,
					x: shape.x + 50,
				};
			} else {
				return {
					...shape,
					y: shape.y + 50,
				};
			}
		}));
	};

	return (
		<>
			<button onClick={handleClick}>
				Move circles Down
			</button>
			{shapes.map(shape => (
				<div
					key={shape.id}
					style={{
						backgroundColor: "purple",
						position: "absolute",
						left: shape.x,
						top: shape.y,
						borderRadius: shape.type === 'circle' ? '50%' : '',
						width: 20,
						height: 20,
					}}
				/>
			))}
		</>
	);
};

export default ShapeEditor;